<template>
  <div class="swiper-box" style="height: 500px">
    <!-- swiper1 -->
    <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
      <swiper-slide class="slide" v-for="(item,index) in imgUrl" :key="index">
        <img :src="item" alt />
      </swiper-slide>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    </swiper>
    <!-- swiper2 Thumbs -->
    <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
      <swiper-slide class="slide" v-for="(item,index) in imgUrl" :key="index">
        <img :src="item" alt />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import "../../assets/css/swiper.min.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  props: ["img"],
  data() {
    return {
      imgUrl: [],
      swiperOptionTop: {
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        slidesPerView: "auto",
        centeredSlides: true,
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
    };
  },
  mounted() {
    console.log(this.$props);
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
  watch: {
    img(val) {
      console.log(val);
      this.Onimg();
    }
  },
  methods: {
    Onimg() {
      if (this.img) {
        this.imgUrl = this.img.split(",");
        console.log(this.imgUrl);
      }
    }
  }
};
</script>
<style lang="less" scoped>
// .swiper-container {
//   background-color: #000;
// }
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.swiper-wrapper {
  div {
    width: 730px;
    height: 415px;
  }
}
.slide {
  img {
    width: 100%;
    height: 100%;
  }
}
.gallery-top {
  // height: 450px;
  width: 100%;
}
.gallery-thumbs {
  height: 112px;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
</style>
